<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">

      <h1 :style="{opacity:opacity}">Vue 真的很不错</h1>
      <button @click="$destroy()">干掉它</button>

    </div>
</body>
<script>

    Vue.config.productionTip = false; // 解决警告信息的

    const vm = new Vue({
      el: "#app",
      data() {
        return {
         
          opacity: 1,
          timer: null,
          
        };
      },
      /*
        mounted 生命周期函数，其实也是vue的配置项

        注意：$destroy函数与react不同，它只是切断了视图与数据的联系。

        突发：为啥定时器，在销毁后，仍无法停止呢？
        原因：由于定时器是交由浏览器控制的，当vue切断视图与数据的联系后，定时并没有销毁，浏览器仍会执行定时器的操作
        
        引入：实例销毁之前也有一个生命周期函数即：beforeDestroy

        解决：beforeDestroy函数中删除定时器


      
    
      */ 
      mounted() {

       this.timer = setInterval(()=>{

          console.log(1);
          this.opacity -= 0.1;
          if(this.opacity <= 0){

              this.opacity = 1;
          }

        },100)
        
      },

      beforeDestroy() {
        clearInterval(this.timer);
        
      },


    });
  </script>


</html>